<template>
<view class="container">
	<view class="header">
	    <view class="header_top">总人数:{{shareTotal.count}}</view>
	    <view class="header_bottom">
	    个人:{{shareTotal.role2}}
	    机构:{{shareTotal.role3}}
	    代理商:{{shareTotal.role4}}
	    未注册:{{shareTotal.role1}}</view>
	</view>
	<view class="search">
	    <input @input="search" placeholder="请输入昵称" value=""/>
	</view>
	
	<view class="list_sort">
	    <view @click="selectCate(1)" class="sort_list_top"
		:class="{ select_true : dataType == 1}">
	        <view class="sort_list">
	            <text>直接推荐</text><text class="num">{{total.total}}</text>
	        </view>
	        <view class="countInfo">
	            <text>个人</text><text class="cnum">{{total.total2}}</text>
	            <text>机构</text><text class="cnum">{{total.total3}}</text>
	        </view>
	    </view>
	    <view @click="selectCate(2)" class="sort_list_top" 
		:class="{ select_true : dataType == 2}">
	        <view class="sort_list">
	            <text>间接推荐</text><text class="num">{{total.sontotal}}</text>
	        </view>
	        <view class="countInfo">
	            <text>个人</text><text class="cnum">{{total.sontotal2}}</text>
	            <text>机构</text><text class="cnum">{{total.sontotal3}}</text>
	        </view>
	    </view>
	</view>
	
	<view class="newslist" v-for="(item,index) in list" :key="index">
		<view class="title" @click="myShare(item.id,item.count)">
			<view class="detail">
				<view class="pic" v-if="item.role == 1" style="background-image:url(https://www.tymyztc.com/static/bg.jpg);background-size:100% 100%;">
					<image :src="item.avatar"></image>
				</view>
				<view class="pic" v-else>
					<image :src="item.avatar"></image>
				</view>
				<view class="info">
					<view>{{item.nickname}}
						<text class="time">{{item.addtime}}</text>
					</view>
					<view v-if="uid == 3">手机号:{{item.tel}}</view>
					<view v-else>手机号:{{item.phone}}</view>
					<view class="jobmoney">
						积分:<text>{{item.integral}}</text>
						<text class="numtext">推荐人数:{{item.count}}</text>
						<text class="numtext" v-if="item.role == 1">未注册</text>
						<text class="numtext" v-if="item.role == 2">个人用户</text>
						<text class="numtext" v-if="item.role == 3">机构用户</text>
						<text class="numtext" v-if="item.role == 4">代理商</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return{
			shareTotal:{},
			list:[],
			page:1,
			pageShow:true,
			total:{},
			keyword:'',
			puid:0,
			dataType:1,
			uid:0
		}
	},
	onLoad:function() {
		this.uid = uni.getStorageSync('uid')
		uni.showLoading({
		    title: '加载中'  
		});
		this.getlist();
		this.getCount();
		this.getTotal();
	},
	methods: {
		getCount:function(){
			var that = this
			var data = {'uid':uni.getStorageSync('uid')}
			request({
				url: 'member/teamCount',
				method: 'get',
				data:data,
				success: (res) => {
					that.total = res.data.data
				}
			})
		},
		getTotal:function(){
			var that = this
			var data = {'uid':uni.getStorageSync('uid')}
			request({
				url: 'user/getShareCount',
				method: 'get',
				data:data,
				success: (res) => {
					that.shareTotal = res.data.data
				}
			})
		},
		getlist:function(){
			var that = this;
			var data = {
				uid:uni.getStorageSync('uid'),
				page:this.page,
				type:this.dataType,
				puid:this.puid,
				keyword:this.keyword
			}
			request({
				url: 'member/myTeam',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.last_page <= that.page){
							that.pageShow = false
						}
						if(that.page == 1){
							that.list = res.data.data.data
						}else{
							var list = that.list
							that.list = list.concat(res.data.data.data)
						}
					}
				}
			})
		},
		onReachBottom: function(){
			if(this.pageShow){
				 //当前不是最后一页可加载
				 this.page = this.page + 1
				 uni.showLoading()
				 this.getlist();
			}
		},
		selectCate:function(key){
			this.dataType = key
			this.page = 1
			this.pageShow = true
			this.puid = 0
			uni.showLoading({
			    title: '加载中'  
			});
			this.getlist();
		},
		myShare:function(id,count){
			if(this.dataType == 1){
			    if(count <= 0){
					uni.showToast({
						title: '此用户暂无推荐人',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
				this.dataType = 2
				this.puid = id
				this.page = 1
				this.pageShow = true
				uni.showLoading({
					title: '加载中'  
				});
				this.getlist();
			}
		},
		search:function(e){
			this.keyword = e.detail.value
			uni.showLoading({
				title: '加载中'  
			});
			this.page = 1
			this.pageShow = true
			this.getlist();
		},
	}
}
</script>

<style>
.container {
    background-color: #f5f5f5;
    min-height: 100%;
}
.header{
    width:100%;
    height:140rpx;
    background:#00b359;
    color:#fff;
    text-align: center;
    display:flex;
    flex-direction: column;
}
.header_top{
    height:80rpx;
    line-height: 80rpx;
    font-size:18px;
}
.header_bottom{
    height:60rpx;
    line-height: 60rpx;
    font-size:14px;
}
.search{
    width:100%;
    height:80rpx;
    background:#FF7800;
    padding-top:20rpx;
    padding-left:10%;
}
.search input{
    width:80%;
    height:60rpx;
    line-height:60rpx;
    background:#fff;
    border-radius: 45rpx;
    padding-left:20rpx;
    text-align: center;
}

.list_sort {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 32px;
    /* position: fixed; */
    top:80rpx;
    z-index: 99;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
    background-color: #fff;
}
.select_true{border-bottom: 3px solid #d65408;}
.sort_list_top{
    width: 49%;
    border-right: 1px solid #ececec;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height:120rpx;
}
.sort_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height:50rpx;
}
.newslist {
    display: flex;
    flex-direction: row;
    width: 720rpx;
    margin: 0 auto;
    border-bottom: 1px solid #efefef;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
}
.title {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}
.detail {
    padding-left: 2%;
    text-align: left;
    font-size: .8rem;
    color: #000;
    display: flex;
    flex-direction: row;
    width: 100%;
}
.pic {
    width: 20%;
    display: flex;
    align-items: center;
}
.pic image {
    width: 120rpx;
    height: 120rpx;
    align-self: center;
    border-radius: 60rpx;
}
 .info {
    padding-left:10rpx;
    width: 75%;
}
.info view:nth-child(1) {
    padding-top: 10rpx;
    color: #646464;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.info view:nth-child(2) {
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    color: #646464;
    font-size: .7rem;
}
.detail view:nth-child(3) {
    padding-top: 10rpx;
    font-weight: bold;
    font-size: .7rem;
    padding-right: 10rpx;
}
.numtext{color:#ff3333;font-size:10px;margin-left:50rpx;}
.num{color:#ff3333;
    width:40rpx;height:40rpx;line-height:40rpx;
    font-size:10px;border:1px solid #ff3333;
    border-radius: 50%;
    text-align: center;
}
.time{font-size:10px;}
.countInfo{width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height:55rpx;font-size:12px;color:#cccccc}
.cnum{color:#ff3333}
.role{width:50rpx;height:50rpx;float:right;}
</style>